<template>
	<view class="pages-index">
		<fixed>
			<view class="nav-search">
				<search @input="toSearch" type="input" :padding="0" :radius="30" backgroundColor="#F0F0F0"
					placeholder="搜索服务名称">
				</search>
			</view>
		</fixed>
		<view class="box">
			<block v-for="(item,index) in skillList" :key="index">
				<view class="box-item b-1px-b flex-between" @tap="setCurrent(index)">
					<view class="f-min-title c-desc">{{item.name}}</view>
					<view v-if="current == index" class="iconfont icon-xuanze-fill" style="font-size: 20px;" :style="{color: primaryColor}"></view>
					<view v-else class="iconfont icon-xuanze" style="font-size: 20px;color: #ccc;"></view>
				</view>
			</block>
		</view>
		<view class="space-max-footer"></view>
		<fix-bottom-button @confirm="confirm"
			:text="[{type:'confirm',text:'完成' }]" bgColor="transparent" borderRadius="16rpx">
		</fix-bottom-button>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	let timer = null
	export default {
		data() {
			return {
				params:{
					name:'',
					is_all:0
				},
				current: -1,
				skillList:[],
				id:''
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		async onLoad(options) {
			// #ifdef H5
			if (this.$jweixin.isWechat()) {
				await this.$jweixin.initJssdk();
				this.$jweixin.wxReady(() => {
					this.$jweixin.hideOptionMenu()
				})
			}
			// #endif
			this.$util.setNavigationBarColor({
				bg: this.primaryColor
			})
			this.id = options.id
			this.getList()
		},
		
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		methods: {
			initRefresh(){
				this.getList()
			},
			async getList(){
				let {params} = this
				let data = await this.$api.find.getSkill(params)
				data.forEach((item,index) => {
					if(item.id == this.id){
						this.current = index
					}
				})
				this.skillList = data
			},
			toSearch(val){
				clearTimeout(timer)
				timer = setTimeout(()=>{
					this.params.name = val
					this.getList()
				},1000)
			},
			confirm(){
				let {current} = this
				if(current == -1){
					return this.$util.showToast({
						title: '请选择服务类型'
					})
				}
				this.$util.getPage(-1).serveType = this.skillList[current].name
				this.$util.getPage(-1).param.ser_id = this.skillList[current].id
				this.$util.goUrl({url: 1 ,openType: "navigateBack" })
			},
			setCurrent(index){
				this.current = index 
				this.id = this.skillList[index].id
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.pages-index {
		.nav-search{
			padding: 17rpx 22rpx;
		}
		.box{
			padding: 0 50rpx;
			.box-item{
				height: 140rpx;
				line-height: 140rpx;
			}
		}
	}
</style>
